
<template>
  <div class="rich-text-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="富文本内容">
        <el-input
          v-model="data.content"
          type="textarea"
          :rows="5"
          placeholder="请输入富文本内容，支持HTML标签"
        />
      </el-form-item>

      <el-form-item label="背景颜色">
        <el-color-picker v-model="data.backgroundColor" />
      </el-form-item>

      <el-form-item label="文字颜色">
        <el-color-picker v-model="data.textColor" />
      </el-form-item>

      <el-form-item label="字体大小">
        <el-slider 
          v-model="data.fontSize" 
          :min="12" 
          :max="24" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="行高">
        <el-slider 
          v-model="data.lineHeight" 
          :min="1" 
          :max="3" 
          :step="0.1"
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="对齐方式">
        <el-radio-group v-model="data.textAlign">
          <el-radio label="left">左对齐</el-radio>
          <el-radio label="center">居中</el-radio>
          <el-radio label="right">右对齐</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="圆角大小">
        <el-slider 
          v-model="data.borderRadius" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="内边距">
        <el-slider 
          v-model="data.padding" 
          :min="0" 
          :max="30" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
      
    </el-form>
  </div>
</template>

<script setup>
// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])
</script>

<style lang="scss" scoped>
.rich-text-panel {
  padding: 10px;
}
</style>
